<!-- 通用下拉加载/上拉刷新demo -->
<template>
	<view class="u-p-20">
		<u-back-top :scroll-top="scrollTop" top="1600" :custom-style="{backgroundColor: '#f1f1f1' }"></u-back-top>
		<!-- 遮罩loading -->
		<u-mask :show="false || loading || sendingRequest">
			<view class="u-flex-col u-row-center u-col-center" style="height: 100vh;color: #e6e6e6;font-size: 28rpx;">
				<u-loading mode="flower" size="46"></u-loading>
				<view class="u-m-l-12 u-m-t-10">拼命加载中</view>
			</view>
		</u-mask>
		<!-- 空状态 -->
		<view v-if="loadStatus === 'nodata'">
			<view class="u-flex u-row-center" style="height: 100vh">
				<u-empty text="暂无数据,先逛逛其他吧!" mode="list"></u-empty>
			</view>
		</view>
		<!-- 有内容 -->
		<view v-else>
			<view class="index-radius u-p-20 u-m-b-20" v-for="(item, index) in dataList" :key="index">
				{{ item }}
			</view>

			<!-- 加载状态 -->
			<u-loadmore margin-top="24" margin-bottom="24" :status="loadStatus" />
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      loadStatus: 'loadmore', // 共4种状态nodata、nomore、loading、loadmore
      scrollTop: 0,
      dataList: []
    }
  },
  onLoad(option) {
    if (this.$dy_tool.forceLogin(this.vuex_token)) {
      return // 该页需要登录
    }
    this.getData()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.loadStatus = 'loadmore' // 加载更多
    this.pageNum = 1
    this.scrollTop = 0
    this.dataList = []
    this.getData()
    uni.stopPullDownRefresh()
  },
  // 到底部加载更多
  onReachBottom() {
    this.getData()
  },
  methods: {
    getData() {
      // 加载系统通知
      this.loadStatus = 'loading' // 加载中
      this.$u.get('openapi/xxx', {
        descs: 'id',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        const resData = res.data.records == null ? [] : res.data.records
        if (this.pageNum === 1 && resData.length === 0) {
          this.loadStatus = 'nodata' // 没有数据
        } else if (resData.length < this.pageSize) {
          this.dataList = this.dataList.concat(resData)
          this.pageNum += 1
          this.loadStatus = 'nomore' // 没有更多
        } else {
          this.dataList = this.dataList.concat(resData)
          this.pageNum += 1
          this.loadStatus = 'loadmore' // 加载结束
        }
      }).catch(error => {
        this.loadStatus = 'loadmore' // 报错保持加载结束
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.index-radius {
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
